<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${question.title}">STAR社区</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2555489_6llng25g56.css">
    <link rel="stylesheet" href="/css/editormd.preview.css" />
</head>
<body>
<nav th:replace="_fragment :: nav"></nav>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12  col-sm-12  col-xs-12">
            <input name="parentId" type="hidden" th:value="${question.id}">
            <h2 th:text="${question.title}"></h2>
            <span class="text_desc">
                作者： <span th:text="${question.user.name}"></span> |
                发布时间： <span th:text="${#dates.format(question.getGmtCreate(),'yyyy-MM-dd')}"></span> |
                阅读数： <span th:text="${question.viewCount}"></span>
            </span>
            <hr>
            <div id="description-view">
                <textarea style="display:none;" th:text="${question.description}"></textarea>
            </div>
            <div ></div>
            <hr>
            <div th:if="${session.user != null}">
                <div style="margin-left: 10px;"><span style="font-size: 16px;margin-left: 10px;" class="label label-info iconfont icon-biaoqian" th:each="item : ${#strings.arraySplit(question.tag,',')}" th:text="${item}">spring</span></div>
                <hr>
                <a th:if="${session.user.token== question.user.getToken()}" th:href="@{/publish/{id}(id=${question.id})}" class="community_a">
                    <span class="iconfont icon-icon-bainji" ></span>编辑
                </a>

            </div>
            <div class="reply">
                <h4><span  th:text="${question.commentCount}"></span> 个回复</h4>
                <hr style="margin-top: 10px;">
                <div class="comment_line" th:each="comment : ${comments}">
                    <div class="media-left">
                        <a >
                            <img class="img_size media-object" src="http://qseoqy0p2.hn-bkt.clouddn.com/zhugeliang.jpg"
                                 alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <span style="color: #888 !important;"  class="media-heading avator_padding" th:text="${comment.user.name}"></span>
                        <p style="font-size: 16px;line-height: 20px;width: 450px;" th:text="${comment.content}">这个是一段回复这个是一段回复这个是一段回复这个是一段回复这个是一段回复这个是一段回复这个是一段回复</p>
                        <div>
                           <div class="fl" style="display: flex;margin-bottom: 7px">
                               <div class="like"><span class="iconfont icon-0_like1"></span></div>
                               <div class="like" th:id="${'d'+comment.id}" th:data="${comment.id}" onclick="collapseComment(this)"><span class="iconfont icon-pinglun " aria-hidden="true"></span><span class="like_count" style="margin-left: 4px" th:text="${comment.childCommentCount}"></span></div>
                           </div>
                            <div style="color: #888 !important;" class="fr"><span th:text="${#dates.format(comment.gmtCreate)}">2019-05-05</span></div>
                        </div>
                        <div class="collapse" th:id="${'a'+comment.id}" style="margin-top: 55px !important;width: 100% !important;border: 1px solid #eee;box-shadow: 2px 2px 2px">
                            <div th:id="${'e'+comment.id}" >

                            </div>
                            <div style="margin-top: 5px;"><input type="text" th:id="${'c'+comment.id}" class="form-control" placeholder="评论一下……"></div>
                            <div class="clearfix">
                                <button style="margin:5px 10px;" onclick="commentParent(this)" th:data="${comment.id}" type="button" class="fr btn btn-success">评论</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <h3>提出回复</h3>
                <div class="media">
                    <div class="media-left">
                        <a >
                            <img class="img_size media-object" src="http://qseoqy0p2.hn-bkt.clouddn.com/zhugeliang.jpg"
                                 alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading avator_padding" th:text="${question.user.name}"></h4>
                    </div>
                </div>
                <div id="comment_wrap">
                    <div class="comment">
                        <textarea class="form-control comment_textarea" rows="6"></textarea>
                    </div>
                    <div class="alert alert-danger" role="alert" hidden="true" >评论内容不能为空 ！</div>
                    <div class="fr">
                        <button onclick="comment()" type="button" class="btn btn-success">回复</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">

            <h3>发起人</h3>
            <div class="media">
                <div class="media-left">
                    <a >
                        <img class="img_size media-object" src="http://qseoqy0p2.hn-bkt.clouddn.com/zhugeliang.jpg"
                             alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading avator_padding" th:text="${question.user.name}"></h4>
                </div>
            </div>
            <hr>
            <h3>有问题找站长</h3>
            <img style="width:150px"  class="img-thumbnail" src="/img/wechat.jpg" alt="">
            <hr>
            <h3>相关问题</h3>
            <ul style="padding: 0px;">
                <li style="list-style: none;font-size: 16px;line-height: 25px" th:each="item : ${relatedQuestion}"><a style="text-decoration: none;"  th:href="@{/question/{id}(id=${item.id})}" th:text="${item.title}"></a></li>
            </ul>
        </div>
    </div>
</div>
<script src="/jquery/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/momentjs.js"></script>
<script src="/js/index.js"></script>
<script src="/js/editormd.min.js"></script>
<script src="/lib/marked.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
         editormd.markdownToHTML("description-view", {});
    });
</script>
</body>
</html>